<template>
  <div class="app-container">
    <!-- 查询条件 -->
    <el-form
      @submit.native.prevent
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="70px"
    >
      <el-form-item label="抽查标题" prop="title">
        <el-input
          v-input-restrict
          v-model="queryParams.title"
          placeholder="请输入抽查标题"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="抽查状态" prop="publish">
        <el-select
          v-model="queryParams.publish"
          filterable
          placeholder="抽查状态"
        >
          <el-option label="全部" :value="undefined" />
          <el-option label="已发放" :value="true" />
          <el-option label="未发放" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          v-preventReClick
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button
          v-preventReClick
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 搜索按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-preventReClick
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
        <el-button
          v-preventReClick
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <!-- 表格 -->
    <el-table v-loading="loading" :data="postList">
      <el-table-column
        label="抽查编号"
        show-overflow-tooltip
        align="center"
        prop="exam_no"
      />
      <el-table-column
        label="抽查名称"
        show-overflow-tooltip
        align="center"
        prop="title"
      />
      <el-table-column
        label="总分"
        show-overflow-tooltip
        align="center"
        prop="total_score"
      />
      <el-table-column
        label="平均分（百分制）"
        show-overflow-tooltip
        align="center"
        prop="avgScore"
      />
      <el-table-column
        label="创建人"
        show-overflow-tooltip
        align="center"
        prop="createName"
      />
      <el-table-column
        label="抽查状态"
        show-overflow-tooltip
        align="center"
        prop="publish"
      >
        <!-- publish判断考核发放状态 -->
        <template slot-scope="scope">
          <span
            v-if="scope.row.publish === true"
            class="el-tag el-tag--success"
          >
            已发放
          </span>
          <span
            v-else-if="scope.row.publish === false"
            class="el-tag el-tag--danger"
          >
            未发放
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="总考核人数"
        show-overflow-tooltip
        align="center"
        prop="totalStu"
      />

      <el-table-column label="已通过人数" align="center" prop="passStu">
      </el-table-column>
      <el-table-column label="未通过人数" align="center" prop="unPassStu">
      </el-table-column>
      <el-table-column label="未完成人数" align="center" prop="startDate">
        <!-- 未完成人数为  totalStu-finishStu-->
        <template slot-scope="scope">
          <span>{{
            scope.row.totalStu - scope.row.unPassStu - scope.row.passStu
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        sortable
        label="添加时间"
        align="center"
        prop="create_time"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.create_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="220"
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
            >抽查情况</el-button
          >

          <el-button
            v-if="!scope.row.publish"
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >

          <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-s-promotion"
            @click="sendByid(scope.row)"
            >发放</el-button
          >

          <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="copyByid(scope.row)"
            >复制</el-button
          >

          <el-button
            v-if="scope.row.publish"
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-video-pause"
            @click="handlePause(scope.row)"
            >{{ scope.row.status == 0 ? "暂停" : "继续" }}</el-button
          >

          <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDel(scope.row)"
            >删除</el-button
          >
          <el-button
            @click="handlePreview(scope.row)"
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-view"
            >小程序预览</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 发放组件 -->
    <sendTestCheck
      ref="sendTestCheck"
      @Sendsuccess="sendSuccess"
    ></sendTestCheck>
    <!-- 添加考试 -->
    <examDialog
      ref="examDialog"
      port="teacher"
      :lookState="false"
      :topicCategoryId="topicCategoryId"
      :isOfflineExam="false"
      :operationType="exam_type"
      :paperOpen.sync="exam_paperOpen"
      :rowId="testCkeckId"
      :taskld="exam_taskId"
      @refresh="sendByid({ id: testCkeckId })"
    ></examDialog>
    <!-- 小程序预览 -->
    <el-drawer :size="size" title="小程序抽查预览" :visible.sync="previewShow">
      <!-- 考试页面 -->
      <courseMiniDrawer_paper
        :showBack="false"
        ref="courseMiniDrawerPaper"
        @toPapering="toPapering"
        v-show="step == 3"
        :examId="previewId"
        :taskName="previewTitle"
        type="testCheck"
      ></courseMiniDrawer_paper>
      <courseMiniDrawer_papering
        :showBack="false"
        ref="courseMiniDrawerPapering"
        v-show="step == 4"
        :examId="previewId"
        :taskName="previewTitle"
        type="testCheck"
      ></courseMiniDrawer_papering>
    </el-drawer>
  </div>
</template>
    
<script>
import courseMiniDrawer_papering from "@/components/courseMiniDrawer_papering.vue";
import courseMiniDrawer_paper from "@/components/courseMiniDrawer_paper.vue";
import sendTestCheck from "./components/sendTestCheck.vue";
import examDialog from "@/views/course/components/examDialog.vue";
import {
  examSpotCheckList,
  examSpotCheckAdd,
  examSpotCheckDel,
  examSpotCheckPause,
  examSpotCheckCopy,
  getCategoryId,
  examSpotCheckexport,
} from "@/api/checkTest/checkTest";
export default {
  name: "Post",
  dicts: ["sys_normal_disable"],
  components: {
    courseMiniDrawer_papering,
    courseMiniDrawer_paper,
    examDialog,
    sendTestCheck,
  },
  data() {
    return {
      fullShow: false,
      size: "460px",
      step: 3,
      previewId: "",
      previewTitle: "",
      previewShow: false,
      // 考核发放组件
      grant_Open: false,
      grant_item: {},
      // 考试组件
      topicCategoryId: "",
      exam_type: 5,
      exam_paperOpen: false,
      testCkeckId: undefined,
      exam_taskId: undefined,
      // 考试组件返回值
      loading: true,
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: undefined,
        publish: undefined,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    toPapering() {
      this.step = 4;
      this.$nextTick(() => {
        this.$refs.courseMiniDrawerPapering.getPaper(this.previewId);
      });
    },
    handlePreview(item) {
      this.previewShow = true;
      this.previewTitle = item.title;
      this.previewId = item.id;
      this.step = 3;
      this.$nextTick(() => {
        this.$refs.courseMiniDrawerPaper.getPaper(this.previewId);
      });
    },
    async handleExport() {
      this.download(
        "/manager/examSpotCheck/export",
        {
          ...this.queryParams,
        },
        `post_${new Date().getTime()}.xlsx`
      );
    },
    /* 暂停继续操作 */
    async handlePause(row) {
      let res = await examSpotCheckPause(row.id, row.status == 0 ? 1 : 0);
      this.$modal.msgSuccess(`${row.status == 0 ? "暂停" : "继续"}考核成功`);
      this.getList();
    },
    /* 删除操作 */
    handleDel(row) {
      this.$confirm(
        `确认删除【${row.title}】吗？删除后不可恢复！`,
        "删除确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          let res = await examSpotCheckDel(row.id);
          if (res.code == 200) {
            this.$modal.msgSuccess("删除成功");
            this.getList();
          }
        })
        .catch(() => {});
    },
    async copyByid(row) {
      const loading = this.$loading({
        lock: true,
        text: "正在复制...",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.6)",
      });
      try {
        let res = await examSpotCheckCopy(row.id);
        if (res.code == 200) {
          this.$modal.msgSuccess("复制成功");
          this.getList();
        }
      } finally {
        loading.close();
      }
    },
    /* 发放操作 */
    async sendByid(row) {
      this.getList();
      this.$refs.sendTestCheck.show(row);
    },
    sendSuccess() {
      this.$modal.msgSuccess("发放成功");
      this.getList();
    },
    /* 编辑按钮操作 */
    async handleEdit(e) {
      localStorage.setItem("testCheckId", e.id);
      this.testCkeckId = e.id;
      this.exam_type = 6;
      let c = await getCategoryId(this.testCkeckId);
      this.topicCategoryId = c.data;
      // 通过考试id生成分类id topicCategoryId
      this.exam_paperOpen = true;
    },
    /** 新增按钮操作 */
    async handleAdd() {
      let res = await examSpotCheckAdd({
        examType: 4,
      });
      this.getList();
      this.testCkeckId = res.data;
      this.exam_type = 5;
      let c = await getCategoryId(this.testCkeckId);
      this.topicCategoryId = c.data;
      // 通过考试id生成分类id topicCategoryId
      this.exam_paperOpen = true;
    },
    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      examSpotCheckList(this.queryParams).then((response) => {
        this.postList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /* 详情 */
    handleDetail(row) {
      // 跳转到详情页
      this.$router.push({
        path: "/testCheck/detail",
        query: {
          id: row.id,
        },
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        amount: undefined,
        startDate: undefined,
        endDate: undefined,
        exam_type: undefined,
        courseIds: [],
      };
      this.resetForm("form");
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const postIds = row.postId || this.ids;
      this.$confirm(
        `确认删除【${row.postName}】吗？删除后不可恢复`,
        `删除确认`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delPost(postIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>
    